<extend name="Public/layout" />
<block name="body">
    <link rel="stylesheet" href="/Public/Wap/css/e.css">
    <link rel="stylesheet" href="/Public/Wap/css/ec.css">
    <script src="/Public/Wap/js/vue.js"></script>
    <script src="/Public/Wap/js/e.js"></script>
    <link rel="stylesheet" href="/Public/Wap/css/dy/list.css">
    <div id="vmRoot" class="vm-container">
        <!-- <div class="card-box">
        </div> -->
        <div class="card-box filter-wrap">
            <div class="ui-flex filter-item-wrap">
                <div class="ui-flex-lt filter-label">{{ filter.data1.title }}</div>
                <div class="ui-flex filter-content">
                    <div v-for="(n, i) in filter.data1.list" :key="i" class="filter-item"
                         :class="{'current': n.idx == postData.vertical_type }"
                         @click="postData.vertical_type = n.idx;getList()">{{ n.title }}</div>
                </div>
            </div>
            <div class="ui-flex filter-item-wrap">
                <div class="ui-flex-lt filter-label">{{ filter.data2.title }}</div>
                <div class="ui-flex filter-content">
                    <div v-for="(n, i) in filter.data2.list" :key="i" class="filter-item"
                         :class="{'current': n.min == postData.min_price && n.max == postData.max_price }"
                         @click="postData.min_price = n.min;postData.max_price = n.max;getList();filter.data2.custom = false">
                        {{ n.title }} </div>
                    <el-button v-if="!filter.data2.custom" @click="filter.data2.custom = true" size="mini" plain>自定义
                    </el-button>
                    <div v-else class="ui-flex">
                        <el-input v-model.number="postData.min_price" placeholder="最低" size="mini" style="width:100px;">
                        </el-input>
                        <span style="padding: 0 10px">至</span>
                        <el-input v-model.number="postData.max_price" placeholder="最高" size="mini" style="width:100px;">
                        </el-input>&nbsp; <el-button @click="getList()" type="primary" size="mini">确定</el-button>
                        <el-button @click="filter.data2.custom = false" size="mini">取消</el-button>
                    </div>
                </div>
            </div>
            <div class="ui-flex filter-item-wrap">
                <div class="ui-flex-lt filter-label">{{ filter.data3.title }}</div>
                <div class="ui-flex filter-content">
                    <div v-for="(n, i) in filter.data3.list" :key="i" class="filter-item"
                         :class="{'current': n.min == postData.fans_num_min && n.max == postData.fans_num_max }"
                         @click="postData.fans_num_min = n.min;postData.fans_num_max = n.max;getList();filter.data3.custom = false">
                        {{ n.title }} </div>
                    <el-button v-if="!filter.data3.custom" @click="filter.data3.custom = true" size="mini" plain>自定义
                    </el-button>
                    <div v-else class="ui-flex">
                        <el-input v-model.number="postData.fans_num_min" placeholder="最低" size="mini"
                                  style="width:100px;">
                        </el-input>
                        <span style="padding: 0 10px">至</span>
                        <el-input v-model.number="postData.fans_num_max" placeholder="最高" size="mini"
                                  style="width:100px;">
                        </el-input>&nbsp; <el-button @click="getList()" type="primary" size="mini">确定</el-button>
                        <el-button @click="filter.data3.custom = false" size="mini">取消</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-box ui-flex-between search-bar">
            <div>共有达人 {{ bdata.total_daren }} 位</div>
            <el-form :inline="true" size="mini" class="">
                <el-form-item label="" style="margin-bottom: 0;">
                    <el-input v-model="postData.keyword" placeholder="请输入……"></el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 0;">
                    <el-button type="primary" @click="getList">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="card-box tb-list" style="padding:0;">
            <el-table :data="pages.list" style="width: 100%">
                <el-table-column label="排名" align="center" type="index"></el-table-column>
                <el-table-column prop="data1" align="" header-align="" label="账号" width="220">
                    <div class="ui-flex" slot-scope="scope">
                        <el-avatar class="ui-flex-lt" size="medium"
                                   :src="scope.row.avatar ? scope.row.avatar : '/Kcdns/Public/Admin/img/avatar6.jpg'">
                        </el-avatar>
                        <div class="ui-flex-1" style="margin-left: 5px;">
                            <div>{{ scope.row.zhubo_nickname }}</div>
                            <div>id:{{ scope.row.no }}</div>
                            <!--<div class="ui-nowrap-flex">{{ scope.row.zhubo_nickname }}</div>-->
                        </div>
                    </div>
                </el-table-column>
                <el-table-column prop="level_text" align="center" label="主播等级"></el-table-column>
                <el-table-column prop="fans_num" align="center" label="粉丝数量" sortable></el-table-column>
                <el-table-column prop="service_hang" align="center" label="服务领域"></el-table-column>
                <el-table-column prop="price" align="center" label="报价"></el-table-column>
                <el-table-column prop="work_type" align="center" label="合作方式"></el-table-column>
                <el-table-column prop="work_num" align="center" label="合作次数"></el-table-column>
                <el-table-column prop="organization" align="center" label="机构"></el-table-column>
                <el-table-column prop="contact" align="center" label="联系方式" width="120"></el-table-column>
                <el-table-column prop="schedule" align="center" label="排期"></el-table-column>
                <el-table-column prop="address" label="收货地址"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain @click="goEdit(scope.row)">编辑 </el-button>
                        <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="main-pagination">
                <el-pagination @size-change="pageSizeChange" @current-change="pageChange" background
                               :page-size="pages.page_size" :page-sizes="[10, 50, 100]" layout="prev, pager, next,sizes, jumper"
                               :total="pages.total">
                </el-pagination>
            </div>
        </div>
    </div>
    <script>
        let fData = '全部,颜值达人,剧情搞笑,美妆,时尚,萌宠,音乐,舞蹈,美食,游戏,旅行,汽车,生活,测评,二次元,母婴,亲子,科技数码,教育培训,运动健身,家居家装,才艺技能,影视娱乐,艺术文化,财经投资,情感,三农,园艺,美搭,综合'
        let fData1 = [{
            title: '全部',
            min: '0',
            max: '0'
        }, {
            title: '10W以上',
            min: '100000',
            max: ''
        }, {
            title: '5W-10W',
            min: '50000',
            max: '100000'
        }, {
            title: '1w-5W',
            min: '10000',
            max: '50000'
        }, {
            title: '0.5W-1W',
            min: '5000',
            max: '10000'
        }, {
            title: '0.2W-0.5W',
            min: '2000',
            max: '5000'
        }, {
            title: '0.2W以下',
            min: '',
            max: '2000'
        }];
        let fData2 = [{
            title: '全部',
            min: '0',
            max: '0'
        }, {
            title: '1000W以上',
            min: '10000000',
            max: ''
        }, {
            title: '500W-1000W',
            min: '5000000',
            max: '10000000'
        }, {
            title: '300W-500W',
            min: '3000000',
            max: '5000000'
        }, {
            title: '100W-300W',
            min: '1000000',
            max: '3000000'
        }, {
            title: '10W-100W',
            min: '100000',
            max: '1000000'
        }, {
            title: '10W以下',
            min: '',
            max: '100000'
        }];


        new Vue({
            el: '#vmRoot',
            data: function () {
                return {
                    type: '<?php echo $type ?>' || 1,
                    filter: {
                        data1: {
                            title: '垂直领域',
                            list: fData.split(',').map((n, i) => { return { title: n, idx: i } })
            },
                data2: {
                    title: '报价',
                            list: fData1,
                            custom: false,
                },
                data3: {
                    title: '粉丝数',
                            list: fData2,
                            custom: false,
                }
            },
                bdata: {

                },
                postData: {
                    vertical_type: 0,
                            min_price: '0',
                            max_price: '0',
                            fans_num_min: '0',
                            fans_num_max: '0',
                            keyword: '',
                },
                pages: {
                    list: [],
                            page_size: 10,
                            page_num: 0,
                            total: 0,
                            page: {}
                },
            }
            },
            methods: {
                getList(params) {
                    let that = this;
                    let param = {
                        type: that.type,
                        page_size: that.pages.page_size
                    }
                    Object.assign(param, that.postData)
                    if (params) {
                        Object.assign(param, params)
                    }
                    $.post('{:U("/kcadmin/dy/sourceData")}', param, function (res) {
                        if (res.code == 1) {
                            that.pages.list = res.data.list;
                            that.pages.page_num = res.data.page_num;
                            that.pages.total = Number(res.data.page_count);
                            that.bdata = res.data;
                        }
                    })
                },
                pageSizeChange(val) {
                    let that = this;
                    that.pages.page_size = val;
                    that.getList()
                },
                pageChange(val) {
                    let that = this;

                    that.getList({
                        page_num: val
                    })
                },

                goEdit(row) {
                    console.log(row)
                    location.href = '{:U("/kcadmin/dy/res_add") }?edit=1&id=' + row.id;
                }
            },
            mounted() {
                this.getList()
            }
        })
    </script>
</block>